<template>
    <div class="page-bg">
        <div class="login-form">
            <div class="login-title">欢迎登陆</div>
            <div class="login-sub-title">Welcome Login</div>
            <el-form ref="form" :model="form" size="normal" :rules="rules">
                <el-form-item prop="name">
                    <el-input prefix-icon="el-icon-user" placeholder="请输入用户名" v-model="form.username" @keyup.enter="login"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input prefix-icon="el-icon-search" placeholder="请输入密码" v-model="form.password" show-password @keyup.enter="login"></el-input>
                </el-form-item>
                <el-form-item>
                    <div style="display: flex">
                        <el-input prefix-icon="el-icon-search" v-model="form.validCode" style="width: 50%" placeholder="请输入验证码" @keyup.enter="login"></el-input>
                        <ValidCode @input="createValidCode" style="margin-left: 10px" />
                    </div>
                </el-form-item>
                <el-form-item style="padding-top: 10px">
                    <el-button style="width: 40%;margin-left: 20px" type="primary" @click="goRegister">注册</el-button>
                    <el-button style="width: 40%; float: right; margin-right: 20px" type="primary" @click="login">登陆</el-button>
                </el-form-item>

            </el-form>
        </div>
    </div>
</template>

<script>
    import request from "../utils/request";
    import ValidCode from "../components/ValidCode";

    export default {
        name: "Login",
        components: {
            ValidCode
        },
        data() {
            return {
                form: {
                    validCode: '',
                },
                rules: {
                    username: [
                        {required: true, message: '请输入用户名', trigger: 'blur'},
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                    ],
                    validCode: [
                        {required: true, message: '请输入验证码', trigger: 'blur'},
                    ],
                }
            }
        },
        methods: {
            goRegister() {
                this.$router.push("/userRegister")
            },
            // 接收验证码组件提交的4位验证码
            createValidCode(data) {
                this.validCode = data;
            },
            login() {
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        if (!this.form.validCode) {
                            this.$message.error("请填写验证码");
                            return;
                    }
                        if(this.form.validCode.toLowerCase() !== this.validCode.toLowerCase()) {
                            this.$message.error("验证码错误");
                            this.form.validCode = '';
                            return;
                        }
                        request.post("/user/login", this.form).then(res => {
                            if (res.code == '0') {
                                this.$message({
                                    type: "success",
                                    message: "登陆成功"
                                });
                                sessionStorage.setItem("user", JSON.stringify(res.data));
                                if (this.form.username === 'admin') {
                                    this.$router.push("/user/");  //登陆成功之后进行页面的跳转
                                }
                                else {
                                    this.$router.push("/register/");  //登陆成功之后进行页面的跳转
                                }
                            } else {
                                this.$message({
                                    type: "error",
                                    message: res.msg
                                })
                            }
                        })
                    } else {
                        console.log('error submit!!');
                        return false
                    }
                })
            },
        }
    }
</script>

<style>
    .page-bg {
        width: 100%;
        height: 100vh;
        background-image: linear-gradient(#4338CA, #312E81);
        overflow: hidden;
    }

    .login-form {
        width: 400px;
        margin: 150px auto;
        padding: 2rem;
        background-color: white;
        border-radius: 0.5rem;
        box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.3);
    }

    .login-title {
        color: #374151;
        font-size: 30px;
        text-align: center;
        padding: 10px 0px 0px 0px
    }

    .login-sub-title{
        font-size: 16px;
        text-align: center;
        padding: 0 0 20px 0;
        color: #9CA3AF;
    }
</style>